<head>
  <meta name="layout" content="doc4"/>
  <link rel="stylesheet" href="${createLinkTo(dir: 'facebox', file: 'facebox.css')}"/>
  <script type="text/javascript" src="${createLinkTo(dir: 'facebox', file: 'facebox.js')}"></script>
  <title>我的首页</title>
  <style>
  .yui-b {
    border: 1px dotted red;
  }

  .people .person a {
    display: block;
    padding-right: 2px;
  }

  .people .person {
    float: left;
    width: 56px;
    overflow: hidden;
  }

  #profile {
    margin-bottom: 10px;
  }

  .box {
    display: block;
    clear: both;
    border: 1px solid #d1d1d1;
    padding-bottom: 10px;
    background-color: #f8f8f8;
    margin-bottom: 10px;
  }

  .box h3 {
    background-color: #eceff5;
    padding: 5px 8px 5px 8px;
    display: block;
    font-size: 12px;
    font-weight: bold;
  }

  .feeddate {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 0 0 1px;
    color: #666666;
    font-weight: bold;
    margin: 5px 0 5px 3px;
    padding: 15px 5px 3px 0;
  }

  .vmore {
    text-align: right;
    padding: 3px;
    font-size: 12px;
  }

  textarea {
    margin: 10px 0px 10px 0px;
  }
.feeds {overflow:visible;}
.onefeed { clear:both; width:500px; padding:10px 0px 10px 0px;background: #FFFFFF;}
.sbl2 {  float:right; width: 430px; text-align: left;background: url('${createLinkTo(dir:'images', file:'bl2.gif')}') bottom left no-repeat #E9E9E9;}
.sbr2 { background: url('${createLinkTo(dir:'images', file:'br2.gif')}') bottom right no-repeat; }
.stl2 { background: url('${createLinkTo(dir:'images', file:'tl2.gif')}') top left no-repeat; }
.str2 { height:30px; overflow:visible; background: url('${createLinkTo(dir:'images', file:'tr2.gif')}') top right no-repeat; padding: 10px; }
.sb2 { float:left; width:70px; margin:12px 0 0; background: url('${createLinkTo(dir:'images', file:'b2.gif')}') top right no-repeat; }
.dateCreated {color: #999999; font-size:12px;}

  </style>
  <script type="text/javascript">
    $(function() {
      $(".onefeed").hover(
        function () {
          $(this).find(".tool_hide").show();
        },
        function () {
          $(this).find(".tool_hide").hide();
        }
      );      
      $("#tabs").tabs({ ajaxOptions: {
                  beforeSend:function(){
                      $("<div id=loading><img src=${createLinkTo(dir:'images', file:'ajax-loader.gif')} align=absmiddle> 正在加载，请稍后......</div>").appendTo("#tabs");
                  },success:function(){
                      $("#loading").remove();
                  }
                } }
              );
    });

  function deleteGrowing(t,rid) {
      if (confirm("确定删除该成长记录？")) {
          $.get("${createLink(controller:'b',action:'ajaxdeletegrowing')}",{target:t, id:rid}, function(data) {
              chkDeleteGrowing(data,rid);
          });
      }
  }
  function chkDeleteGrowing(d,rid) {
      if (d=="1") {
          $("#grow"+rid).fadeOut("slow", function() {
              $(this).remove();
              if ($(".gbt").length==0) {
                  $("#feeds").html('<div class="isayNoMsg">还没有任何成长记录。</div>');
              }
          });
      } else if (d=="-1") {
          alert("对不起，请先登录。");
      } else if (d=="-2") {
          alert("错误，要删除的内容不存在。");
      }
  }    

  </script>

</head>
<body>
<div id="yui-main">
  <div class="yui-b">
    <div class="yui-ge">
      <div class="yui-u first">
        <div class="demo">

          <div id="tabs">
            <ul>
              <li><a href="${createLink(action: 'events', id: baby.id)}">首页</a></li>
              <li><a href="#tabs-1">成长记录</a></li>
              <li><a href="${createLink(action: 'tasks', id: baby.id)}">要做的事</a></li>
              <li><a href="${createLink(action: 'lessons', id: baby.id)}">学堂</a></li>
              <li><a href="${createLink(action: 'milestone', id: baby.id)}">里程碑</a></li>
              <li><a href="${createLink(action: 'experience', id: baby.id)}">心得</a></li>
            </ul>
            <div id="tabs-1">
              <div class="growing">
                <div id="growAddBtn" class="optBtnDiv">
                  <a href="#" onclick="$('#growAddDiv').slideDown('slow')">(+) 增加成长记录</a>
                </div>
                <div id="growAddDiv" class="hidden">
                  <g:form controller="b" action="saveGrowing">
                    <textarea name="content"></textarea>
                    <input type="hidden" name="baby.id" value="${baby.id}"/>
                    <input type="submit" class="btnGrey" value="确定" style="display:inline"/>
                    <a href="#" onclick="$('#growAddDiv').slideUp('slow')">取消</a>
                  </g:form>
                </div>
                <div class="feeds">
                  <cms:growings baby="${baby}">
                    <g:each in="${growingList}" var="grow">
                      <div class="onefeed" id="grow${grow.id}">
                        <div class="sb2"><cms:headImg baby="${grow.baby}"/></div>

                        <div class="sbl2">
                          <div class="sbr2">
                            <div class="stl2">
                              <div class="str2">
                                ${grow.content} <span class="dateCreated"><cms:formatDate date="${grow.dateCreated}"/></span>
                                <div class="tool_hide hidden" style="float:right;"><a href="javascript:deleteGrowing('grow',${grow.id})"><span>X</span></a></div>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                      
                    </g:each>
                    <g:if test="${growingList.size() == 0}">
                      <div class="info">你还没有增加您宝宝的成长记录，记录宝宝成长的点点滴滴，未来回首看看的时候，会收获意想不到的乐趣。</div>
                    </g:if>
                  </cms:growings>
                  <div style="clear:both"></div>
                </div>
              </div>
            </div>
            
          </div>

        </div><!-- End demo -->

      </div>
      <div class="yui-u">
        2222
      </div>
    </div>
  </div>
</div>
<div class="yui-b">
  <div id="profile">
    <img id="profile_pic" alt="李国强" width="180" src="http://profile.ak.facebook.com/v223/1365/15/n1129719862_1962.jpg"/>
  </div>
  <div class="box">
    <h3 class="box_header"><span>基本信息</span></h3>
    <div class="box_content">
      宝宝快要一岁半啦 <cms:service>${babyService.getStage(baby)}</cms:service>
    </div>
    <cms:isManager baby="${baby}">
    <div class="vmore">
      <span class="dot">▪</span><g:link controller="b" action="edit">编辑＞</g:link>
    </div>
    </cms:isManager>
  </div>
  <div class="box">
    <h3 class="box_header"><span>同一阶段宝宝</span></h3>
    <div class="box_content">
      <div class="people">
        <div class="row clearfix">
          <div class="person">
            <a href=""><img src="http://static.ak.fbcdn.net/pics/q_silhouette.gif"/></a>
            <a href="">1</a>
          </div>
          <div class="person">
            <a href=""><img src="http://static.ak.fbcdn.net/pics/q_silhouette.gif"/></a>
            <a href="">larray</a>
          </div>
          <div class="person">
            <a href=""><img src="http://static.ak.fbcdn.net/pics/q_silhouette.gif"/></a>
            <a href="">larray</a>
          </div>
        </div>
      </div>
      <div class="vmore">
        <span class="dot">▪</span><g:link action="samestage">显示更多＞</g:link>
      </div>
    </div>
  </div>
  <div class="box">
    <h3 class="box_header"><span>附近宝宝</span></h3>
    <div class="box_content">
      <div class="people">
        <div class="row clearfix">
          <div class="person">
            <a href=""><img src="http://static.ak.fbcdn.net/pics/q_silhouette.gif"/></a>
            <a href="">1</a>
          </div>
          <div class="person">
            <a href=""><img src="http://static.ak.fbcdn.net/pics/q_silhouette.gif"/></a>
            <a href="">larray</a>
          </div>
          <div class="person">
            <a href=""><img src="http://static.ak.fbcdn.net/pics/q_silhouette.gif"/></a>
            <a href="">larray</a>
          </div>
        </div>
      </div>
      <div class="vmore">
        <span class="dot">▪</span><g:link action="nearby">显示更多＞</g:link>
      </div>
    </div>
  </div>
</div>
</body>
